<template>
  <div class="text-sm kk-note">
    <!-- <div class="px-3 pt-3">
      <p class="font-semibold">Custom CSS</p>
      <p class="leading-tight text-muted-foreground">
        Add custom css to the page
      </p>
    </div> -->
    <div
      class="flex items-center px-3 mt-1 space-x-1 border-b text-muted-foreground"
    >
      <button
        :class="[
          'border-b-2 inline-flex items-center p-2 hover:text-foreground transition',
          activeTab === 'global'
            ? 'border-primary text-foreground'
            : 'border-transparent',
        ]"
        @click="activeTab = 'global'"
      >
        记事本
        <span
          v-if="appProvider.state.hasGlobalCSS"
          class="w-2 h-2 ml-2 text-xs bg-red-500 rounded-md opacity-50 text-zinc-100"
        />
      </button>
    </div>
    <div class="min-h-16 overflow-auto px-3 pb-3 pt-2">
      <KeepAlive>
        <CustomCSSGlobal v-if="activeTab === 'global'" />
      </KeepAlive>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, shallowRef } from 'vue';
import { useAppProvider } from '../../app-plugin';
import CustomCSSGlobal from '@root/src/pages/components/custom-css/CustomCSSGlobal.vue';
import CustomCSSElements from '@root/src/pages/components/custom-css/CustomCSSElements.vue';

const appProvider = useAppProvider();

const activeTab = shallowRef('global');

</script>
